Cart
CFA Institute Store
Jump to full cart example
Type
Lorem ipsum dolor sit amet consectetur adipiscing elit fusce
HTML
<div class="cart-item">
<div class="cart-item-image">
<img src="/Content/src/img/altitude-clouds-cold-417173.jpg" alt="mountain" />
</div>
<div class="cart-item-content">
<p class="cart-item-content-type">Type</p>
<p class="cart-item-content-title h4">Lorem ipsum dolor sit amet consectetur adipiscing elit fusce</p>
</div>
<div class="cart-item-remove">
<form method="get">
<button id="launchRemoveCartItemModal" class="modal-launch anchor" aria-expanded="false" data-target="#removeCartItemModal1"><span class="cfaicon-x p_blue"></span>Remove <span class="screen-reader-only">YOUR ITEM'S TITLE HERE from cart</span></button>
</form>
</div>
</div>
- SubtotalUSD xxx.xx
- Discount-USD xxx.xx
- TaxUSD xxx.xx
- Order TotalUSD xxx.xx
HTML
<div class="cart-summary">
<ul class="cart-summary-list">
<li class="cart-summary-list-item">
<span>Subtotal</span><span>USD xxx.xx</span>
</li>
<li class="cart-summary-list-item">
<span>Discount</span><span>-USD xxx.xx</span>
</li>
<li class="cart-summary-list-item">
<span>Tax</span><span>USD xxx.xx</span>
</li>
<li class="cart-summary-list-item">
<span>Order Total</span><span>USD xxx.xx</span>
</li>
</ul>
<a href="#" class="button cart-summary-checkout">Go to Checkout</a>
</div>
| Item | Price | Quantity | Item Total |
|---|---|---|---|
| USD xxx.xx | X | USD xxx.xx |
- SubtotalUSD xxx.xx
- Discount-USD xxx.xx
- TaxUSD xxx.xx
- Order TotalUSD xxx.xx
HTML
<div class="cart-container grid-container">
<div class="overflow-table">
<table class="adjust-for-mobile cart">
<thead>
<tr role="row">
<th class="item-header">Item</th>
<th class="price-header">Price</th>
<th class="quantity-header">Quantity</th>
<th class="item-total-header">Item Total</th>
</tr>
</thead>
<tbody>
<tr role="row">
<td data-label="Item" class="item-data">
<div class="cart-item">
<div class="cart-item-image">
<img src="/Content/src/img/altitude-clouds-cold-417173.jpg" alt="mountain" />
</div>
<div class="cart-item-content">
<p class="cart-item-content-type">Type</p>
<p class="cart-item-content-title h4"><a href="#">YOUR ITEM'S TITLE HERE</a></p>
</div>
<div class="cart-item-remove">
<form method="get">
<button id="launchRemoveCartItemModal" class="modal-launch anchor" aria-expanded="false" data-target="#removeCartItemModal1"><span class="cfaicon-x p_blue"></span>Remove <span class="screen-reader-only">YOUR ITEM'S TITLE HERE from cart</span></button>
</form>
</div>
</div>
</td>
<td data-label="Price" class="price-data">
USD xxx.xx
<p><a href="#">Log in for member price</a></p>
</td>
<td data-label="Quantity" class="quantity-data">X</td>
<td data-label="Item Total" class="item-total-data">USD xxx.xx</td>
</tr>
</tbody>
</table>
</div>
<div class="cart-summary">
<ul class="cart-summary-list">
<li class="cart-summary-list-item">
<span>Subtotal</span><span>USD xxx.xx</span>
</li>
<li class="cart-summary-list-item">
<span>Discount</span><span>-USD xxx.xx</span>
</li>
<li class="cart-summary-list-item">
<span>Tax</span><span>USD xxx.xx</span>
</li>
<li class="cart-summary-list-item">
<span>Order Total</span><span>USD xxx.xx</span>
</li>
</ul>
<a href="#" class="button cart-summary-checkout">Go to Checkout</a>
</div>
</div>
<div id="removeCartItemModal1" class="cfa-modal" aria-hidden="true" role="dialog">
<div class="cfa-modal-dialog">
<div class="modal-content">
<h5 id="modal-title" class="modal-title alt" tabindex="0">Remove Item</h5>
<div class="modal-body">
<p>Are you sure you want to remove this item from your cart?</p>
</div>
<div class="modal-footer">
<form method="get">
<button>Yes<span class="screen-reader-only">, remove YOUR ITEM'S TITLE HERE from cart</span></button>
</form>
<button class="click-to-close secondary">No</button>
</div>
</div>
<button class="modal-close click-to-close cfaicon-x">
<span class="screen-reader-only">Close Modal</span>
</button>
</div>
</div>
Problem Being Solved
We need an updated cart experience for the CFA Institute Store.
When to Use
Only use this for the CFA Institute Store.
When Not to Use
Do not use this for anything other than the CFA Institute Store.
Formatting
- All images will be sized by CSS to be 100px X 100px.
- If the item title needs to be linked, please place the anchor link inside the paragraph element with the class "cart-item-content-title h4."
- The remove button is in the last column of the table and being placed under the item image using CSS.
- Remove from cart modal:
- We will be using our modal pattern for this functionality — please make sure you follow all documentation when implementing.
- The remove button will only submit if JS doesn't load. If JS does load, the modal JS will kick in and prevent default — the remove button in the modal will then be the form submit button.
- Pay close attention to the screen reader only text's phrasing we're using to help be more descriptive. The only changing on the backend would be making sure the correct title of the item is being used.
- Place your modal just outside of the "cart-container" div.
- Per the modal documentation, each modal launch button and modal should have a unique ID so that the JS works to apply accessibility correctly.